<template>
  <div class="map-container">
    <div id="container">
      <iframe
        src="./fengMap/index.html"
        ref="MapIframe"
        frameborder="0"
      ></iframe>
    </div>
    <div class="map-right" :class="{ 'fold-right-animate': rightFold }">
      <div class="fold" v-if="!rightFold">
        <img
          src="@/assets/icon/zhe-you.png"
          alt=""
          srcset=""
          @click="moveLeftRightMain('right')"
        />
      </div>
      <div class="unfold" v-if="rightFold" @click="moveLeftRightMain('right')">
        <img src="@/assets/icon/zhe-zuo.png" alt="" srcset="" />
      </div>
      <div class="search-panel">
        <div class="input-row">
          <el-input
            v-model="keyword"
            @keyup.enter.native="initRiderList(true)"
            placeholder="配送员姓名/手机号"
          >
            <i
              slot="suffix"
              class="el-input__icon el-icon-search"
              @click="initRiderList(true)"
            ></i>
          </el-input>
        </div>
      </div>
      <div class="rider-list" ref="riderList">
        <div v-if="!riderList.length">
          <el-empty description="暂无在线骑手"></el-empty>
        </div>
        <div
          :class="[
            'rider-cell',
            activeRiderId == rider.id ? 'check-active' : '',
          ]"
          ref="riderCell"
          v-for="(rider, rider_index) in riderList"
          :key="rider.id"
          @click="changeRider(rider)"
        >
          <div class="hand-order-count">
            <div class="today-count">
              <div class="today-count-child">
                <div class="today-num">{{ rider.orderCount }}</div>
                <div class="today-order-label">今日接单量</div>
              </div>
            </div>
            <div class="shu-line"></div>
            <div class="underway-count">
              <div class="today-count-child">
                <div class="underway-num">{{ rider.deliveryOrderCount }}</div>
                <div class="underway-label">配送中</div>
              </div>
            </div>
          </div>
          <div class="rider-info">
            <div class="rider-name">
              <span class="rider-number">【{{ rider_index + 1 }}号】</span>
              {{ rider.name }}
            </div>
            <div class="rider-tel">{{ rider.phone }}</div>
          </div>
          <div class="rider-location" v-if="rider.addr">
            <div class="current-local-label">
              <img
                class="position-icon"
                src="@/assets/icon/position-icon.png"
                alt=""
                srcset=""
              /><span>当前位置：</span>
            </div>
            <span class="current-local-value">
              {{ rider.addr }}
            </span>
          </div>
          <el-button plain class="assign-task" @click.stop="assignTask(rider)"
            >指派</el-button
          >
        </div>
      </div>
    </div>
    <div class="table-container" :class="{ 'fold-left-animate': leftFold }">
      <div class="fold" v-if="leftFold">
        <img
          src="@/assets/icon/zhe-you.png"
          alt=""
          srcset=""
          @click="moveLeftRightMain('left')"
        />
      </div>
      <div class="unfold" v-if="!leftFold" @click="moveLeftRightMain('left')">
        <img src="@/assets/icon/zhe-zuo.png" alt="" srcset="" />
      </div>
      <el-form
        @submit.native.prevent
        :inline="true"
        class="search-form"
        ref="searchForm"
        :model="searchForm"
        size="small"
        label-width="80px"
      >
        <div class="input-row">
          <el-input
            v-model="searchForm.keyword"
            type="text"
            placeholder="订单号、门店名称"
            @keyup.enter.native="searchChange(true)"
          >
            <i
              slot="suffix"
              class="el-input__icon el-icon-search"
              @click="searchChange(true)"
            ></i>
          </el-input>
          <div class="cascader-two">
            <el-cascader
              :clearable="true"
              placeholder="取货地址"
              v-model="searchForm.takeDeliveryIdTree"
              ref="CascaderShopLocation1"
              :options="shopLocationOptions"
              :props="shopLocationProps"
              @change="handleShopLocationChange($event, 'takeDeliveryId')"
            >
            </el-cascader>
            <div class="zhn-box"></div>
            <el-cascader
              :clearable="true"
              placeholder="收货地址"
              v-model="searchForm.deliveryIdTree"
              ref="CascaderShopLocation2"
              :options="shopLocationOptions"
              :props="shopLocationProps"
              @change="handleShopLocationChange($event, 'deliveryId')"
            >
            </el-cascader>
          </div>
          <!--
                <el-form-item style="float: right">
                  <div
                    class="default-btn primary-btn"
                    @click="searchChange(true)"
                  >
                    {{ $t("crud.searchBtn") }}
                  </div>
                  <div class="default-btn" @click="resetForm('searchForm')">
                    {{ $t("product.reset") }}
                  </div>
                </el-form-item> -->
        </div>
      </el-form>
      <div class="main-container">
        <div v-if="!dataList.length">
          <el-empty description="暂无订单"></el-empty>
        </div>
        <div class="order-list">
          <div
            :class="[
              'order-cell',
              activeOrderId == item.id ? 'check-active' : '',
            ]"
            v-for="(item, index) in dataList"
            :key="index"
            @click.stop="changeOrderRadio(item)"
          >
            <div
              class="message-popo"
              v-if="timeFormatYmd(item.estimatedDeliveryTime) != currentDay"
            >
              <img
                class="message-popo-img"
                src="@/assets/icon/message-popo.png"
                alt=""
              />
              <span class="message-popo-ymd">
                {{ timeFormatYmd(item.estimatedDeliveryTime) }}
              </span>
            </div>
            <div class="order-top">
              <div class="clock-icon">
                <img src="@/assets/icon/clock-icon.png" alt="" srcset="" />
              </div>
              <div class="count-down">
                <TimerCountdown
                  v-if="!item._isOvertime"
                  :deadline="item.timekeeping"
                  :complete-zero="true"
                  :left-second="0"
                  :ignore-day="true"
                  @done="searchChange(true)"
                >
                  <template v-slot="timeRemaining">
                    <span class="timer-num">{{
                      timeRemaining.day * 24 +
                      parseInt(timeRemaining.hour) * 60 +
                      parseInt(timeRemaining.minute)
                    }}</span>
                    <span class="timer-text">分</span>
                    <span class="timer-num">{{ timeRemaining.second }}</span>
                    <span class="timer-text">秒</span>
                  </template>
                </TimerCountdown>
                <template v-if="item._isOvertime">
                  <div class="is-overtime">
                    <el-tag size="mini" type="danger" effect="dark">
                      已超时
                    </el-tag>
                  </div>
                  <span class="timer-num">{{
                    parseInt(item.timekeeping / 60)
                  }}</span>
                  <span class="timer-text">分</span>
                </template>
              </div>
              <div class="arrival-time">
                (送达时间{{ timeFormat(item.estimatedDeliveryTime) }})
              </div>
              <div class="radio">
                <el-radio v-model="activeOrderId" :label="item.id"
                  ><span></span
                ></el-radio>
              </div>
            </div>
            <div class="delivery-info">
              <div class="delivery-icons">
                <div class="delivery-store">
                  <img src="@/assets/icon/map-s.png" alt="" srcset="" />
                </div>
                <div class="delivery-line"></div>
                <div class="delivery-store">
                  <img src="@/assets/icon/map-u.png" alt="" srcset="" />
                </div>
              </div>
              <div class="delivery-info-container">
                <div class="store-panel">
                  <div class="shop-name">{{ item.shopName }}</div>
                  <div class="addr">{{ item.shopAddress }}</div>
                </div>
                <div class="distance">
                  <!-- 1.5km 10分钟 -->
                </div>
                <div class="user-panel">
                  <div class="shop-name">{{ item.nickName }}</div>
                  <div class="addr">{{ item.userAddr }}</div>
                </div>
              </div>
            </div>
            <div>
              <div class="refuse-order" v-if="item.refuseReason">
                <el-tooltip
                  :content="item.refuseReason"
                  placement="bottom"
                  effect="light"
                >
                  <div><i class="el-icon-warning"></i>拒单</div>
                </el-tooltip>
              </div>
            </div>
            <el-button
              plain
              class="see-order"
              @click.stop="viewOrderInfo(item.id)"
              >查看订单详情</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <OrderInfoComp ref="OrderInfoComp" />
    <AppointOrderComp ref="AppointOrderComp" @refresh="searchChange(true)" />
  </div>
</template>

<script>
import TimerCountdown from "vue-timer-countdown";
import { processTreeData, deepCopy } from "@/utils";
import OrderInfoComp from "./OrderInfoComp.vue";
import AppointOrderComp from "./AppointOrderComp.vue";
export default {
  components: { OrderInfoComp, AppointOrderComp, TimerCountdown },
  data() {
    return {
      riderTimer: null,
      map: null,
      marker: {
        lng: 121.80890374581008,
        lat: 31.133522115543425,
      },
      keyword: "",
      riderList: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 99999, // 每页显示多少条
      },
      searchForm: {
        takeDeliveryId: "", //取货区域id，
        deliveryId: "", // 配送区域id
      },
      theData: null, // 保存上次点击查询的请求条件
      dataList: [],
      activeOrderId: "",
      activeRiderId: "",
      shopLocationOptions: [],
      shopLocationProps: {
        label: "name",
        value: "id",
        checkStrictly: true,
      },
      currentDay: "",

      rightFold: false,
      leftFold: false,
    };
  },
  mounted() {
    this.currentDay = this.timeFormatYmd();
    this.pollingRiderCurrentLocation();
    this.queryShopLocation();
    this.getDataList(null, null, () => {
      this.$refs.MapIframe.onload = () => {
        this.$refs.MapIframe.contentWindow.$parent_this = this;
      };
    });
  },
  destroyed() {
    this.riderTimer && clearTimeout(this.riderTimer);
  },
  methods: {
    setDeadLine(item) {
      if (new Date(item.estimatedDeliveryTime) - new Date() >= 0) {
        return (new Date(item.estimatedDeliveryTime) - new Date()) / 1000;
      } else {
        item._isOvertime = true;
        this.$set(item, "_isOvertime", true);
        return (
          Math.floor(new Date() - new Date(item.estimatedDeliveryTime)) / 1000
        );
      }
    },
    timeFormat(dateString) {
      if (!dateString) return;
      // 创建一个新的 Date 对象
      const date = new Date(dateString);
      // 获取小时和分钟
      const hours = date.getHours();
      const minutes = date.getMinutes();
      // 返回格式化的时分字符串
      return `${hours < 10 ? "0" + hours : hours}:${
        minutes < 10 ? "0" + minutes : minutes
      }`;
    },
    timeFormatYmd(dateString) {
      let date;
      if (dateString) {
        date = new Date(dateString);
      } else {
        date = new Date();
      }
      // 获取小时和分钟
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      // 返回格式化的年月日
      return `${year}-${month < 10 ? "0" + month : month}-${
        day < 10 ? "0" + day : day
      }`;
    },
    changeOrderRadio(e) {
      console.log("e", e);
      if (this.activeOrderId == e.id) {
        this.activeOrderId = "";
        return;
      }
      this.activeOrderId = e.id;
      this.$refs.MapIframe.contentWindow.mapGo({
        level: e.shopLevel,
        lng: e.shopLng,
        lat: e.shopLat,
      });
    },
    changeRider(rider) {
      console.log("rider", rider);
      this.$refs.MapIframe.contentWindow.removeRiderHandOrders();
      if (this.activeRiderId == rider.id) {
        this.activeRiderId = "";
        return;
      }
      this.activeRiderId = rider.id;
      this.queryProgressOrderByRider(rider);
    },
    queryProgressOrderByRider(rider) {
      this.$http({
        url: this.$http.adornUrl("/platform/rider/floor"),
        method: "get",
        params: {
          riderId: rider.id,
        },
      }).then(({ data }) => {
        if (data && data.length) {
          this.$refs.MapIframe.contentWindow.handleRiderHandOrders(data);
        }
        if (rider.riderLng && rider.riderLat) {
          this.$refs.MapIframe.contentWindow.mapGo({
            level: rider.riderLevel,
            lng: rider.riderLng,
            lat: rider.riderLat,
          });
        }
      });
    },
    getDataList(page, newData = false, callback) {
      if (newData || !this.theData) {
        this.theData = JSON.parse(JSON.stringify(this.searchForm));
      }
      this.$http({
        url: this.$http.adornUrl("/platform/rider/order/List"),
        method: "post",
        data: {
          page: {
            current: page == null ? this.page.currentPage : page.currentPage,
            size: page == null ? this.page.pageSize : page.pageSize,
          },
          ...this.theData,
        },
      }).then(({ data }) => {
        data.records.forEach((f) => {
          f.timekeeping = this.setDeadLine(f);
        });
        this.dataList = data.records;
        this.page.total = data.total;
        callback && callback();
      });
    },
    initRiderList() {
      this.$http({
        url: this.$http.adornUrl("/platform/rider/list"),
        method: "get",
        params: this.$http.adornParams({
          keyword: this.keyword,
          orderId: this.activeOrderId,
        }),
      }).then(({ data }) => {
        this.riderList = data;
        console.log(
          "this.$refs.MapIframe.contentWindow",
          this.$refs.MapIframe.contentWindow
        );
        this.$refs.MapIframe.contentWindow.removeRiderOrStoreMarkers(); // 删除点位
        this.$refs.MapIframe.contentWindow.sortOutPointBelongMap(); // 重新撒点
      });
    },
    pollingRiderCurrentLocation() {
      this.initRiderList();
      this.getDataList(this.page, false);
      this.riderTimer = setTimeout(() => {
        this.pollingRiderCurrentLocation();
      }, 10 * 1000);
    },
    handleShopLocationChange(e, key) {
      console.log("e", e);
      if (e.length === 0) {
        this.searchForm[key] = "";
      } else {
        this.searchForm[key] = e[e.length - 1];
      }
      this.searchChange(true);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.searchForm = {};
      this.$forceUpdate();
    },

    queryShopLocation() {
      this.$http({
        url: this.$http.adornUrl("/admin/platform/airportStation/list"),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        data.forEach((node) => {
          processTreeData(node);
        });
        this.shopLocationOptions = data;
      });
    },
    // 条件查询 JSON.stringify(arr)
    searchChange(newData = false, callback) {
      this.page.currentPage = 1;
      this.getDataList(this.page, newData, callback);
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getDataList();
    },
    assignTask(rider) {
      if (!this.activeOrderId) {
        this.$message({
          message: "请选择要指派的订单",
          type: "warning",
        });
        return;
      }
      let orderItem = this.dataList.find((item) => {
        return item.id == this.activeOrderId;
      });
      console.log("orderItem", orderItem);
      if (!orderItem) {
        this.$message({
          message: "指派的订单不存在！",
          type: "warning",
        });
        return;
      }
      this.$confirm(
        `确定要将订单 [${orderItem.shopName} <-> ${orderItem.nickName}] 指派给[ ${rider.name} ]派送吗？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl("/platform/rider/assign"),
          method: "get",
          params: this.$http.adornParams({
            poolInfoId: orderItem.id,
            riderId: rider.id,
          }),
        }).then(({ code, data }) => {
          if (code == "00000") {
            this.$message({
              message: "指派成功",
              type: "success",
              duration: 1500,
            });
            this.activeOrderId = "";
            this.searchChange(true, () => {
              this.$refs.MapIframe.contentWindow.removeRiderHandOrders(); // 删除路径
              this.$refs.MapIframe.contentWindow.removeRiderOrStoreMarkers(); // 删除点位
              this.$refs.MapIframe.contentWindow.sortOutPointBelongMap(); // 重新撒点
            });
            this.searchChange(true);
            this.initRiderList(true);
            this.queryProgressOrderByRider({
              id: this.activeRiderId,
            });
          }
        });
      });
    },
    viewOrderInfo(id) {
      this.$refs.OrderInfoComp.open(id);
    },
    appoint({ id, orderNumber }) {
      this.$refs.AppointOrderComp.open({
        poolInfoId: id,
        orderNumber: orderNumber,
      });
    },
    moveLeftRightMain(direction) {
      if (direction == "left") {
        this.leftFold = !this.leftFold;
      } else {
        this.rightFold = !this.rightFold;
        this.$refs.MapIframe.contentWindow.moveControl(this.rightFold); // 删除路径
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.map-container {
  height: calc(100vh - 130px);
  width: 100%;
  position: relative;
  .cascader-two {
    margin-top: 12px;
    display: flex;
    .zhn-box {
      width: 10px;
      flex: none;
    }
  }
  .main-container {
    flex: 1;
    overflow: scroll;
    box-sizing: border-box;
    padding: 20px 4px;
  }
  .order-list {
    width: max-content;
    margin: 0 auto;
    .order-cell {
      width: 290px;
      box-shadow: 0px 0px 3px 1px rgba(223, 223, 223, 0.5);
      border-radius: 4px;
      box-sizing: border-box;
      padding: 12px;
      margin-bottom: 12px;
      border: 1px solid #f9fdff;
      position: relative;

      .message-popo {
        position: absolute;
        right: 37px;
        top: -18px;
        width: 98px;
        height: 37px;
        font-size: 14px;
        color: #1890ff;
        text-align: center;
        line-height: 37px;
        .message-popo-ymd {
          position: absolute;
          right: 12px;
          top: -2px;
        }
      }

      .order-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eeeeee;
        padding-bottom: 10px;
        .count-down {
          flex: auto;
        }
        .clock-icon {
          width: 20px;
          height: 22px;
          margin-right: 8px;
        }
        .timer-num {
          font-weight: 500;
          font-size: 14px;
          color: #f34b4b;
          font-weight: bold;
        }
        .is-overtime {
          position: absolute;
          top: -13px;
          left: -10px;
          width: 98px;
          height: 37px;
          font-size: 14px;
          color: #1890ff;
          text-align: center;
          line-height: 37px;
        }
        .timer-text {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: #333333;
          font-style: normal;
          margin: 0 4px;
        }
      }
      .delivery-info {
        display: flex;
        justify-content: space-between;
        margin-top: 13px;
      }
      .refuse-order {
        color: #fc3333;
        margin-right: 10px;
        font-size: 14px;
        width: max-content;
        margin: 0 auto;
        margin-top: 14px;
        .el-icon-warning {
          margin-right: 4px;
        }
      }
      .delivery-icons {
        display: flex;
        flex-direction: column;
        align-items: center;
        .delivery-line {
          width: 1px;
          height: 100%;
          border: 1px solid;
          border-image: linear-gradient(
              180deg,
              rgba(255, 185, 117, 1),
              rgba(253, 147, 112, 1)
            )
            1 1;
        }
        .delivery-store {
          img {
            width: 24px;
            height: 24px;
          }
        }
      }
      .delivery-info-container {
        margin-left: 10px;
        flex: 1;
        .shop-name {
          font-weight: 500;
          font-size: 14px;
          color: #333333;
          font-weight: bold;
        }
        .addr {
          font-weight: 400;
          font-size: 12px;
          color: #666666;
          margin-top: 3px;
        }

        .distance {
          font-size: 12px;
          color: #333333;
          margin: 14px 0 14px 0;
        }
        .user-panel {
          transform: translateY(4px);
        }
      }
      .arrival-time {
        font-weight: 400;
        font-size: 14px;
        text-align: center;
        font-style: normal;
        margin-right: 10px;
      }
      .radio {
        pointer-events: none;
      }
    }
    .see-order {
      padding: 0;
      height: 36px;
      line-height: 36px;
      margin-top: 15px;
      width: 260px;
      border-radius: 12px;
      color: #1f46c1;
      border: 1px solid #1f46c1;
      font-weight: bold;
    }
  }
}
.check-active {
  border: 1px solid #1f46c1 !important;
  background: #f9fdff !important;
  box-shadow: 0px 0px 3px 1px rgba(220, 240, 255, 0.5) !important;
}
#container {
  height: 100%;
  width: 100%;
  iframe {
    width: 100%;
    height: 100%;
  }
}
.fold-right-animate {
  transform: translateX(99%);
}
.map-right {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 320px;
  height: calc(100% - 40px);
  background: #ffffff;
  box-shadow: 0px 0px 10px 2px rgba(106, 106, 106, 0.25);
  border-radius: 2px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s linear;

  .fold,
  .unfold {
    position: absolute;
    right: 305px;
    top: -20px;
    top: 49%;
    height: 30px;
    width: 30px;
    z-index: 2;
    cursor: pointer;
    // animation: moveLeft 3s linear infinite;
  }

  // 向左移动动画 反复执行
  @keyframes moveLeft {
    0% {
      right: 290px;
    }
    100% {
      right: 270px;
    }
  }

  .search-panel {
    box-sizing: border-box;
    padding: 15px;
    .input-row {
      ::v-deep .el-input__inner {
        background: #eeeeee;
        box-sizing: border-box;
        padding-right: 30px !important;
      }
      .el-input__icon {
        cursor: pointer;
      }
    }

    .right-tit {
      font-weight: 500;
      font-size: 18px;
      color: #333333;
    }

    .right-search {
      margin-top: 12px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      ::v-deep .el-input__inner {
        background-color: #eeeeee !important;
        border: none;
        cursor: pointer;
      }
    }
  }

  .rider-list {
    margin: 0 auto;
    width: 290px;
    flex: 1;
    overflow: scroll;
    box-sizing: border-box;
    padding: 20px 4px;
    .rider-cell {
      width: 100%;
      background: #ffffff;
      box-shadow: 0px 0px 3px 1px rgba(223, 223, 223, 0.5);
      border: 1px solid #f9fdff;
      border-radius: 4px;
      margin-bottom: 12px;
      box-sizing: border-box;
      padding: 15px;
      .hand-order-count {
        display: flex;
        flex: 1;
        background: #f8f8f8;
        .today-count,
        .underway-count {
          width: 130px;
          height: 65px;
          text-align: center;
          display: flex;
          align-items: center;
        }
        .today-count-child {
          height: max-content;
          width: max-content;
          margin: 0 auto;
        }
        .today-order-label,
        .underway-label {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #444444;
          font-style: normal;
          margin-top: 4px;
        }
        .underway-num {
          font-weight: 500;
          font-size: 18px;
          color: #0ccf57;
          font-weight: bold;
        }
        .today-num {
          font-weight: 500;
          font-size: 18px;
          color: #1f46c1;
          font-weight: bold;
        }
        .shu-line {
          width: 0.5px;
          height: 49px;
          margin-top: 8px;
          opacity: 0.6;
          background: #e8e8e8;
        }
      }
      .rider-info {
        display: flex;
        justify-content: space-between;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        margin-top: 10px;
        .rider-name {
          width: 125px;
        }
      }
      .rider-location {
        margin-top: 12px;
        .position-icon {
          width: 20px;
          height: 22px;
          display: inline-block;
        }
      }
      .current-local-label {
        display: flex;
        font-weight: 700;
        margin-bottom: 4px;
        align-items: center;
      }
      .current-local-value {
        line-height: 21px;
      }
      .assign-task {
        height: 36px;
        padding: 0;
        line-height: 36px;
        margin-top: 12px;
        width: 100%;
        border-radius: 12px;
        color: #1f46c1;
        border: 1px solid #1f46c1;
        font-weight: bold;
      }
    }
  }
}
.tel-tag {
  padding: 0 2px;
  background: rgba(24, 144, 255, 0.02);
  border-radius: 2px;
  border: 1px solid #1890ff;
  color: #1890ff;
  font-size: 14px;
}
.fold-left-animate {
  transform: translateX(-99%);
}
.table-container {
  width: 320px;
  height: calc(100% - 40px);
  background: #ffffff;
  box-shadow: 0px 0px 10px 2px rgba(106, 106, 106, 0.26);
  box-sizing: border-box;
  border-radius: 2px;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s linear;

  .fold,
  .unfold {
    position: absolute;
    left: 305px;
    top: 49%;
    height: 30px;
    width: 30px;
    z-index: 2;
    cursor: pointer;
    // animation: moveLeft 3s linear infinite;
  }

  // 向左移动动画 反复执行
  @keyframes moveLeft {
    0% {
      right: 290px;
    }
    100% {
      right: 270px;
    }
  }
}

.search-form {
  box-sizing: border-box;
  padding: 15px;
  .input-row {
    ::v-deep .el-input__inner {
      background: #eeeeee;
      box-sizing: border-box;
      padding-right: 30px !important;
    }
    .el-input__icon {
      cursor: pointer;
    }
  }
}
.tips .text {
  color: #ff0000;
}
::v-deep .el-table__fixed {
  height: auto !important;
  bottom: 16px !important;
  &::before {
    background-color: transparent !important;
  }
}
::v-deep .el-table__fixed-right {
  height: auto !important;
  bottom: 16px !important;
  &::before {
    background-color: transparent !important;
  }
}
.TagS {
  margin-right: 10px !important;
}

.table-con {
  position: relative;
}

.empty-text {
  text-align: center;
  color: #909399;
}
::v-deep .export-load {
  top: -50% !important;
}
::v-deep
  .el-select
  .el-select__tags
  > span
  > .el-tag.el-tag--info:nth-last-child(2) {
  max-width: 120px;
}

.dot-status {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0 auto;
}
.dot {
  margin-right: 4px;
  height: 16px;
  width: 16px;
  border-radius: 50%;
}
.dot1 {
  background: #1ad037;
}
.dot0 {
  background: #909399;
}
.green-btn {
  cursor: pointer;
  color: #1ad037;
}

.el-icon-search {
  color: #999999;
  padding-right: 16px;
  cursor: pointer;
  font-size: 18px;
  line-height: 0;
}
</style>

<style>
.floor-parent-node {
  left: 0 !important;
  top: 200px !important;
}
</style>
